<%@ page import="java.util.List" %>
<%@ page import="com.hdwx.weike.beans.VideoSection" %>
<%@ page import="com.hdwx.weike.beans.VideoType" %>
<%@ page import="com.hdwx.weike.beans.PageBean" %>
<%@ page import="com.hdwx.weike.beans.VideoBean" %>
<%@ page import="com.hdwx.weike.service.impl.HotSearchServiceImpl" %>
<%@ page import="com.hdwx.weike.service.IHotSearchService" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.hdwx.weike.service.impl.VideoServiceImpl" %>
<%@ page import="com.hdwx.weike.service.IVideoService" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <link href="static/dist/css/bootstrap.css" rel="stylesheet">
    <title>视频列表</title>
    <style type="text/css">
        a:hover{
            text-decoration: none;
            cursor: pointer;
        }
        #title h3{
            margin-bottom: -10px;
            font-weight: 600;
        }
        #section,#type{
            font-weight: 600;
            color: #666666;

        }
        #section li,#type li{
            display: inline-block;
            margin-bottom: 10px;
        }
        #section a ,#type a{
            margin:10px;
            color: #666666;
            text-decoration: none;
        }
        #section .active a,#type .active a{
            background-color: #40a9ff;
            color: white;
            padding: 5px 10px;
        }
        #section .active a:hover,#type .active a:hover{
            color: white;
        }
        #section a:hover,#type a:hover,.video_name:hover{
            text-decoration: none;
            cursor: pointer;
            color: #40a9ff;
        }

        #content hr{
            position: relative;
            top:-20px;
            border: 1px solid #c8c9ca;
        }
        .container #search{
            position: relative;
            top: -40px;
            left:5px;
            width:98%;
            background-color: #f7f7f7;
            height:50px;
            line-height: 50px;

        }
        .container #search input,.container #search img{
            height: 30px;
        }
        .container #search img{
            margin-left: -10px;
        }
        .container #search img{
            margin-bottom: 2px;
        }
        .container #search li a{
           margin-left: 10px;
            color: #666666;
        }
        .container #search li a:hover,.container #search .search_course{
            cursor: pointer;
            text-decoration: none;
        }
        .container #search li a.active{
            color: #40a9fe;
            font-weight: 600;
        }
        #video{
            color: #9f9f9f;
            position: relative;
            top:-40px;
        }
        #video img{
            margin-top: 20px;
        }
        .video_name{
            color: #333333;
        }
        .user,.user:hover{
            color: #5fb41b;
            text-decoration: none;
        }
        .user_firm,.user_firm:hover{
            color: #9f9f9f;
            text-decoration: none;
        }
        .right_background{
            background-color:#f7f7f7 ;
            width: 95%;
        }
        .right_background h3{
            border-bottom: 1px solid #cccccc;
            padding-bottom: 10px;
        }
        #hot_search{
            position: relative;
            top:-40px;
        }
        #hot_search a{
            display: inline-block;
            margin: 5px 10px;
            color: #666666;
            text-decoration: none;
        }
        #nav a:hover{
            color: white;
        }
        #nav_background a{
            text-decoration: none;
            color: white;
        }
        .video{
            height: 300px;
            margin-right: 20px;
        }
        .video2{
            padding: 10px 15px;
        }
        .video:hover,.video2:hover{
            padding-left: 13px;
            border: 1px solid black;
            background-color: white;
        }
        #back{
            position: fixed;
            left:93%;
            bottom: 50px;
            z-index: 10;
        }





        
    </style>
    <script src="jQuery/jquery-1.11.3.js"></script>
    <script src="js/videolist.js"></script>

</head>

<body>
    <%
        Object bean = request.getAttribute("pageBean");
        PageBean pageBean=new PageBean();
        if(bean!=null){
            pageBean= (PageBean) bean;
        }

    %>
    <%@include file="nav.jsp"%>
    <div class="container">
        <%-- 标题--全部微课--%>
        <div class="row" id="title">
            <div class="col-md-12"><h3>全部微课</h3></div>
            <div class="col-md-12"><hr></div>
        </div>
        <%-- 学段 --%>
        <div class="row" id="section">
                <div class="col-md-1">学段:</div>
                <div class="col-md-11">
                    <ul class="list-inline" id="ul1">
                        <%
                            if(pageBean.getSectionId()==0){
                        %>
                            <li class="active"> <a href="videolist?sectionId=0">全部</a></li>
                        <%
                            }else{
                        %>
                            <li> <a href="videolist?sectionId=0">全部</a></li>
                        <%
                            }
                        %>

                        <%
                            Object obj = request.getAttribute("sections");
                            if(obj!=null){
                                List<VideoSection> sections= (List) obj;
                                for (VideoSection section : sections) {
                                    if(pageBean.getSectionId()==section.getId()){
                        %>
                                        <li class="active"><a href="videolist?sectionId=<%=section.getId()%>"><%=section.getName()%></a></li>
                        <%
                                    }else{
                        %>
                                        <li><a href="videolist?sectionId=<%=section.getId()%>"><%=section.getName()%></a></li>
                        <%
                                    }
                                }
                            }
                        %>


                    </ul>
                </div>
            <div class="col-md-12"><hr></div>
        </div>
        <%-- 分类 --%>
        <div class="row" id="type">
            <div class="col-md-1">分类:</div>
            <div class="col-md-11">
                <ul class="list-inline" id="ul2">
                    <%
                        if(pageBean.getTypeId()==0){
                    %>
                        <li class="active"><a href="videolist?typeId=0">全部</a></li>
                    <%
                        }else{
                    %>
                        <li><a href="videolist?typeId=0">全部</a></li>
                    <%
                        }
                    %>


                    <%
                        Object obj2 = request.getAttribute("types");
                        if(obj2!=null){
                            List<VideoType> types= (List) obj2;
                            for (VideoType type : types) {
                                if(pageBean.getTypeId()==type.getId()){
                    %>
                                    <li class="active"><a href="videolist?typeId=<%=type.getId()%>&sectionId=<%=pageBean.getSectionId()%>"><%=type.getName()%></a></li>
                    <%
                                }else{
                    %>
                                    <li><a href="videolist?typeId=<%=type.getId()%>&sectionId=<%=pageBean.getSectionId()%>"><%=type.getName()%></a></li>
                    <%
                                }
                            }
                        }
                    %>

                </ul>
            </div>
        </div>

        <%-- 具体内容 --%>
        <div class="row" id="content">
            <div class="col-md-12"><hr></div>

            <%-- 左边视频 --%>
            <div class="col-md-9">
                    <%-- 排序搜素框 --%>
                    <div class="row">
                        <div class="col-md-12" >
                            <ul class="list-inline" id="search">
                                <%
                                    int sortId = pageBean.getSortId();
                                    switch (sortId){
                                        case 0:
                                %>
                                <li><a name="sort_time" class="active" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=0">最新</a></li>
                                <li><a name="sort_score" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=1">评分</a></li>
                                <li><a name="sort_view" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=2">浏览量</a></li>
                                <li><a name="sort_collection" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=3">收藏量</a></li>

                                <%
                                            break;
                                        case 1:
                                %>
                                <li><a name="sort_time" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=0">最新</a></li>
                                <li><a name="sort_score" class="active" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=1">评分</a></li>
                                <li><a name="sort_view" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=2">浏览量</a></li>
                                <li><a name="sort_collection" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=3">收藏量</a></li>
                                <%
                                            break;
                                        case 2:
                                %>
                                <li><a name="sort_time" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=0">最新</a></li>
                                <li><a name="sort_score" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=1">评分</a></li>
                                <li><a name="sort_view" class="active" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=2">浏览量</a></li>
                                <li><a name="sort_collection" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=3">收藏量</a></li>
                                <%
                                            break;
                                        case 3:
                                %>
                                <li><a name="sort_time" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=0">最新</a></li>
                                <li><a name="sort_score" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=1">评分</a></li>
                                <li><a name="sort_view" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=2">浏览量</a></li>
                                <li><a name="sort_collection" class="active" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=3">收藏量</a></li>
                                <%
                                            break;
                                    }
                                %>
                                <li><a href="">精品</a></li>
                                <%
                                    String keyName = (String) request.getAttribute("keyName");
                                    if(keyName!=null){
                                %>
                                <li><input class="search_content" placeholder="搜索课程" value="<%=keyName%>"><a><img class="search_course" src="static/img/search.jpg"></a></li>
                                <%
                                    }else{
                                %>
                                <li><input class="search_content" placeholder="搜索课程"><a><img class="search_course" src="static/img/search.jpg"></a></li>
                                <%
                                    }
                                %>


                            </ul>
                        </div>
                    </div>
                     <%-- 视频 --%>
                    <div class="row" id="video">
                    <%
                            if(pageBean.getData()!=null){
                                for (VideoBean videoBean : pageBean.getData()) {
                    %>
                                <%-- 单个视频 --%>
                                 <div class="col-md-4" >
                                    <div class="col-md-11 video" >
                                        <a href="<%=videoBean.getVideoUrl()%>" class="link" id="<%=videoBean.getId()%>"><img src="<%=videoBean.getVideoCoverImg()%>"></a>
                                        <h5><a class="video_name link" href="<%=videoBean.getVideoUrl()%>" id="<%=videoBean.getId()%>">《<%=videoBean.getName()%>》</a></h5>
                                        <p><a class="user"><%=videoBean.getUploadUsername()%></a> | <a class="user_firm"><%=videoBean.getUploadUserFirm()%></a></p>
                                        <p>评分<span class="text-danger"><%=videoBean.getScore()%></span> (<%=videoBean.getCommentCount()%>人评) &nbsp收藏<span class="text-danger"><%=videoBean.getCollections()%></span> &nbsp浏览<span class="text-danger"><%=videoBean.getViewCount()%></span></p>
                                    </div>

                                 </div>
                    <%
                                }
                    %>
                        <%-- 分页按钮 --%>
                    <%
                        if(pageBean.getTotalPage()<=1){
                    %>
                    <%--总页数小于等于1，不显示分页   该行会影响代码排版--%>
                    <div class="row hidden">
                    <%
                        }else{
                    %>
                    <%-- 总页码大于1，显示分页 --%>
                    <div class="row">
                    <%
                        }
                    %>
                        <div class="col-md-4 col-md-offset-4">
                            <ul class="pagination">
                                <%
                                    if(pageBean.getCurrentPage()>1){//有上一页
                                %>
                                <li><a name="pre_page" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=<%=pageBean.getSortId()%>&pageIndex=<%=pageBean.getCurrentPage()-1%>">上一页</a></li>
                                <%
                                }else{//没有上一页
                                %>
                                <li class="disabled"><a>上一页</a></li>
                                <%

                                    }
                                %>

                                <li><a><%=pageBean.getCurrentPage()%></a></li>

                                <%
                                    if(pageBean.getCurrentPage()<pageBean.getTotalPage()){//有下一页
                                %>
                                <li><a name="next_page" href="videolist?sectionId=<%=pageBean.getSectionId()%>&typeId=<%=pageBean.getTypeId()%>&sortId=<%=pageBean.getSortId()%>&pageIndex=<%=pageBean.getCurrentPage()+1%>">下一页</a></li>
                                <%
                                }else{//没有下一页
                                %>
                                <li class="disabled"><a>下一页</a></li>
                                <%
                                    }
                                %>

                            </ul>
                        </div>
                    </div>
                    <%
                            }else{//没有数据
                    %>
                    <div class="col-md-4">抱歉，没有找到您需要的数据！</div>
                    <%
                             }
                    %>
                </div>
            </div>


            <%--  右边热搜 及 猜你喜欢 --%>
            <div class="col-md-3">
                <%-- 热门搜索 --%>
                <div class="row " id="hot_search">
                    <div class="col-md-12 right_background" >
                        <h3 class="little_title">热门搜索</h3>
                        <ul class="list-inline" >
                            <%
                                IHotSearchService hotSearchService = new HotSearchServiceImpl();
                                List<String> list = hotSearchService.queryHotKey();
                                List<String> hotList=new ArrayList<String>();
                                if(list!=null){
                                    hotList=list;
                                }
                                for (String str : hotList) {
                            %>
                                 <li><a><%=str%></a></li>
                            <%
                                }
                            %>


                        </ul>
                    </div>
                </div>

                <%-- 猜你喜欢 --%>
                <div class="row" id="guess_you_like">
                    <div class="col-md-12 right_background" >
                        <h3 class="little_title">猜你喜欢</h3>
                        <%
                            IVideoService videoService = new VideoServiceImpl();
                            List<VideoBean> list1 = videoService.queryByCollection();
                            List<VideoBean> videoList=new ArrayList<VideoBean>();
                            if(list1!=null){
                                videoList=list1;
                            }
                            for (VideoBean videoBean : videoList) {
                        %>
                        <div class="col-md-12 video2">
                            <a href="<%=videoBean.getVideoUrl()%>" class="link" id="<%=videoBean.getId()%>"><img src="<%=videoBean.getVideoCoverImg()%>"></a>
                            <h5><a class="video_name link" href="<%=videoBean.getVideoUrl()%>" id="<%=videoBean.getId()%>">《<%=videoBean.getName()%>》</a></h5>
                            <p><a class="user"><%=videoBean.getUploadUsername()%></a> | <a class="user_firm"><%=videoBean.getUploadUserFirm()%></a></p>
                            <p>评分<span class="text-danger"><%=videoBean.getScore()%></span> (<%=videoBean.getCommentCount()%>人评) &nbsp收藏<span class="text-danger"><%=videoBean.getCollections()%></span> &nbsp浏览<span class="text-danger"><%=videoBean.getViewCount()%></span></p>
                        </div>
                        <%
                            }
                        %>

                    </div>
                </div>
            </div>


        </div>

        <div id="back" class="hidden">
            <img src="static/img/gotop.jpg" id="gotop">
            <img src="static/img/gotop1.jpg" id="gotop1" class="hidden">
        </div>
    </div>
    <%@include file="footer.jsp"%>
</body>
</html>
